<template>
	<view style="height: 100%;">
		<view class="centent">
			<view class="navtitle">
				<view class="shou" :class="[status==0?'active':'']" @tap="change(0)">
					<text>收到的通知</text>
				</view>
				<view class="fa" :class="[status==1?'active':'']" @tap='change(1)'>
					<text>发出的信件</text>
				</view>
				<view class="xie" @tap="xiexin">
					<image src="../../static/xie.png" mode=""></image>
				</view>
			</view>
			<view class="navtopbox">
				<view class="navtopboxcenter">
					<!-- <view class="imgbox" v-if="emaillist.length<1">
						<image src="../../static/wutongzhi.png" mode=""></image>
						<text>暂无通知</text>
					</view> -->
					<kongyemian v-if="emaillist.length<1" :isLoding="loding"></kongyemian>
					<scroll-view scroll-y="true" style="height:100% ;">
						<view class="navlist" @tap="toclassggxiangqing(item.id)" v-if="emaillist.length>0"
							v-for="(item,index) in emaillist" :key="index">
							<view class="title">
								<!-- <text>回复：</text> -->
								<!-- <text>【</text> -->
								<text>{{item.title}}</text>
								<!-- <text>】</text> -->
							</view>
							<view class="jianyao">
								<text class="wenziboxone">{{item.content}}</text>
							</view>
							<view class="time">
								<text v-text="showTimePipe(item.send_time*1000)"></text>
							</view>
							<view class="tojiantou">
								<image src="../../static/jiantou.png" mode=""></image>
							</view>
						</view>

					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},
		data() {
			return {
				status: 0,
				showzhanwu: false,
				emaillist: [],
				school_id:0,
				index:0,
				loding:true				
			}
		},
		methods: {
			showTimePipe(unix_stamp) { // unix_stamp 精确到微秒
				var _today_obj = new Date(),
					_today_date = {
						y: _today_obj.getFullYear(),
						m: (_today_obj.getMonth() + 1 < 10 ? '0' + (_today_obj.getMonth() - -1) : (_today_obj.getMonth() -
							-1)),
						d: (_today_obj.getDate() < 10 ? '0' + _today_obj.getDate() : _today_obj.getDate())
					}

				var _today_stamp = Date.parse(_today_date.y + '/' + _today_date.m + '/' + _today_date.d + ' 00:00:00')

				var stamp = []
				stamp[0] = _today_stamp + 86400000
				stamp[1] = _today_stamp
				stamp[2] = _today_stamp - 86400000
				stamp[3] = _today_stamp - 172800000

				stamp[4] = _today_stamp - 518400000 // 7天

				stamp[5] = _today_stamp - 31536000000 // 365天

				var _compare_obj = new Date()
				_compare_obj.setTime(unix_stamp)

				var return_str

				if (unix_stamp >= stamp[1] && unix_stamp < stamp[0]) {
					return_str = _compare_obj.getHours() + ':' + (_compare_obj.getMinutes() < 10 ? '0' + _compare_obj
						.getMinutes() : _compare_obj.getMinutes())
				} else if (unix_stamp >= stamp[2] && unix_stamp < stamp[1]) {
					var yesterdayText = '昨天'
					return_str = yesterdayText + ' ' + _compare_obj.getHours() + ':' +
						(_compare_obj.getMinutes() < 10 ? '0' + _compare_obj.getMinutes() : _compare_obj.getMinutes())
				} else if (unix_stamp >= stamp[3] && unix_stamp < stamp[2]) {
					var theDayBeforeYesterdayText = '前天'
					return_str = theDayBeforeYesterdayText + ' ' + _compare_obj.getHours() + ':' +
						(_compare_obj.getMinutes() < 10 ? '0' + _compare_obj.getMinutes() : _compare_obj.getMinutes())

				} else if (unix_stamp >= stamp[4] && unix_stamp < stamp[3]) { // 7天内
					var daynames = ['天', '一', '二', '三', '四', '五', '六']
					var dathStr = '星期' + daynames[_compare_obj.getDay()]

					var SundayText = '星期天'
					var MondayText = '星期一'
					var TuesdayText = '星期二'
					var WednesdayText = '星期三'
					var ThursdayText = '星期四'
					var FridayText = '星期五'
					var SaturdayText = '星期六'

					var dathStr2

					switch (dathStr) {
						case '星期天':
							dathStr2 = SundayText
							break
						case '星期一':
							dathStr2 = MondayText
							break
						case '星期二':
							dathStr2 = TuesdayText
							break
						case '星期三':
							dathStr2 = WednesdayText
							break
						case '星期四':
							dathStr2 = ThursdayText
							break
						case '星期五':
							dathStr2 = FridayText
							break
						case '星期六':
							dathStr2 = SaturdayText
							break
						default:
							dathStr2 = dathStr
							break
					}

					return_str = dathStr2 + ' ' + _compare_obj.getHours() + ':' +
						(_compare_obj.getMinutes() < 10 ? '0' + _compare_obj.getMinutes() : _compare_obj.getMinutes())
				} else if (unix_stamp >= stamp[5] && unix_stamp < stamp[4]) { // 365天内
					var monthText = '月'
					var dayText = '日'
					return_str = (_compare_obj.getMonth() - (-1)) + monthText + _compare_obj.getDate() + dayText + ' ' +
						_compare_obj.getHours() + ':' + (_compare_obj.getMinutes() < 10 ? '0' + _compare_obj.getMinutes() :
							_compare_obj.getMinutes())

				} else {
					var yearText = '年'
					var monthText = '月'
					var dayText = '日'
					return_str = _compare_obj.getFullYear() + yearText + (_compare_obj.getMonth() - (-1)) +
						monthText + _compare_obj.getDate() + dayText + ' ' + _compare_obj.getHours() + ':' +
						(_compare_obj.getMinutes() < 10 ? '0' + _compare_obj.getMinutes() : _compare_obj.getMinutes())
				}
				return return_str
			},
			change(e) {
				
				this.status = parseInt(e);
				this.useremailxx(this.status)
			},
			toclassggxiangqing(id) {
				uni.navigateTo({
					url: '../tongzhixaingqing/tongzhixaingqing?id=' + id +'&index=' + this.status
				})
			},
			xiexin() {
					
				if(this.isLogin){
					uni.navigateTo({
						url: "../xiexin/xiexin?school_id="+this.school_id
					})
				}else{
					uni.navigateTo({
						url: '../login/login'
					})
				}
				
			},
			useremailxx() {
				this.loding = true
				this.$store
					.dispatch('useremailxx', {
						openid: this.userInfo.openid,
						index: this.status,
						send_type:this.index
					})
					.then(res => {
						
						this.emaillist = res.data.data
						this.loding = false
					});
			}





		},
		onLoad(data) {
			this.index = uni.getStorageSync("def")
			this.school_id = data.school_id
			// this.useremailxx()
		},
		onShow() {
			this.useremailxx()
		},
		onPullDownRefresh() {
			this.useremailxx()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		}
		
	}
</script>

<style lang="less">
	page {
		height: 100%;
		background-color: #f4f4f4;
		box-sizing: border-box;

	}

	.centent {
		background-image: url(../../static/keding.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;

		.navtitle {
			display: flex;
			align-items: flex-end;
			width: 100%;
			height: 150rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			position: relative;

			.shou,
			.fa {
				width: 200rpx;
				height: 80rpx;
				color: #fff;
				border-radius: 10rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 25rpx;
			}

			.active {
				background-color: #fff;
				color: #000;
				font-weight: bold;
				font-size: 28rpx;

			}

			.xie {
				position: absolute;
				right: 30rpx;
				bottom: 0;
				width: 70rpx;
				height: 70rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}


		}

		.navtopbox {
			width: 100%;
			height: calc(100vh - 150rpx);
			padding: 20rpx;
			box-sizing: border-box;

			.navtopboxcenter {
				position: relative;
				width: 100%;
				height: 100%;
				background-color: #fff;
				box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
				border-radius: 15rpx;
				overflow: hidden;

				.imgbox {
					display: flex;
					text-align: center;
					flex-direction: column;
					color: #7dd2ef;
					font-size: 25rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translateX(-50%) translateY(-50%);

					image {
						width: 300rpx;
						height: 191rpx;
						margin-bottom: 8rpx;
					}

					text {
						width: 300rpx;
						letter-spacing: 1em
					}
				}

				.navlist {
					position: relative;
					width: 100%;
					min-height: 200rpx;
					border-bottom: 2rpx solid #ccc;
					padding: 20rpx 40rpx 20rpx 20rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;

					.title {
						font-size: 32rpx;
						font-weight: bold;

					}

					.jianyao {
						font-size: 24rpx;

						.wenziboxone {														
							overflow: hidden;
							width: 95%;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;																												
						}

					}


					.time {
						font-size: 24rpx;
						color: #999999;
					}

					.tojiantou {
						position: absolute;
						right: 13rpx;

						image {
							width: 27rpx;
							height: 45rpx;
						}
					}
				}

			}
		}


	}
</style>
